<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/swiper1.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/swiper2.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/swiper3.jpeg">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
    </swiper>
    <!--end of swiper -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" v-for="(item,index) in navName" :key="index">
          <i class="sprite" :class="item[0]"></i>
          <div class="py-2">{{item[1]}}</div>
        </div>
      </div>
      <div class="bg-light py-2">
        <i class="sprite sprite-arrow mr-1"></i>
        <span>收起</span>
      </div>
    </div>
    <!--end of nav icons -->
    <!--newsCats新闻分类 -->
    <m-list-card icon="Menu" title="新闻资讯" :categories="newsCats">
      <template #items="{category}">
        <router-link tag="div" :to="`/articles/${news._id}`" class="py-2 fs-lg d-flex" v-for="(news,i) in category.newsList" :key="i"> 
          <span class="text-info">[{{news.categoryName}}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey-1 fs-sm">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>
    <m-list-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem;">
          <router-link :to="`/heroes/${hero._id}`" tag="div" class="p-2 text-center" style="width:20%" v-for="(hero,i) in category.heroList" :key="i"> 
            <img :src="hero.avatar" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <m-card icon="menu1" title="精彩视频"></m-card>
    <m-card icon="menu1" title="图文攻略"></m-card>
    <m-card icon="menu1" title="新闻资讯"></m-card>
    <m-card icon="menu1" title="新闻资讯"></m-card>
  </div>

</template>

<script>
import dayjs from 'dayjs'
export default {
  filters:{ 
    date(val){
      return dayjs(val).format('MM/DD')
    }
  },
  data(){
    return{
      swiperOption:{
        pagination:{
          el:'.pagination-home',
        },
        autoplay:{
          delay:1500
        }
      },
      navName:[['sprite-news','爆料站'],//className navItemName
      ['sprite-story','故事站'],
      ['sprite-shop','周边商城'],
      ['sprite-experience','周边商城'],
      ['sprite-newPlayer','新人专区'],
      ['sprite-gloryInheritance','荣耀传承'],
      ['sprite-community','同人社区'],
      ['sprite-kingCamp','王者营地'],
      ['sprite-publicAddress','公众号'],
      ['sprite-version','版本介绍']],
      newsCats:[],
      heroCats:[]
    }
  },
  methods: {
    async fetchNewsCats(){
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
    },
    async fetchHeroCats(){
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
    }
  },
  created() {
    this.fetchNewsCats()
    this.fetchHeroCats()
  },
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
  .pagination-home{
    .swiper-pagination-bullet{
      opacity: 1;
      border-radius: 0.1538rem;
      background: map-get($colors,'white');
      &.swiper-pagination-bullet-active{
        background: map-get($colors,'info')
      }
    }
  }
  .nav-icons{
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    .nav-item{
      width: 25%;
      border-right: 1px solid $border-color;
      &:nth-child(4n){ //0 4 8不加边框
        border-right: none;
      }
    }
  }
</style>